<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav" @click="goBack"></a>
			<a v-if="role != 2 && role != 5 && classList.length > 1" id="menu" class="mui-action-menu mui-icon mui-icon-more-filled mui-pull-right" href="#topPopover"></a>
			<h1 class="mui-title">{{title}}</h1>
			<a v-if="role == 5" class="mui-action-menu mui-icon mui-icon-more-filled mui-pull-right" @click="chooseClass"></a>
		</header>
		<div class="mui-content mui-fullscreen">
			<div v-if="role != 2 && role != 5" class="search-content searchWrap">
				<label class='searchBtn mui-icon mui-icon-search'></label>
				<!--<input type="search" placeholder="查询" value="" name="search" class="actualInput" v-on:input="searchContent">-->
				<input type="search" placeholder="学生" value="" name="search" class="actualInput" v-model="input" ref="type1" @click="searchShow">
				<span class="mui-icon mui-icon-close cancel" @click="dataShow"></span>
			</div>
			<div class="searchContent" v-show="openSearch">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" v-for="student in studentList" @click="goStudent(student.Name, student.StudentID)">
						<a class="mui-navigate-right">
							{{student.Name}}（{{student.StudentNo}}）
						</a>
					</li>
				</ul>
			</div>
			<div class="dataContent" v-show="!openSearch">
				<div class="title">考勤总计</div>
				<div id="round_chart" class="chart">

				</div>
				<ul class="timeTab">
					<li :class="{timeActive:index == curIndex}" v-for="item,index in timeList" @click="changeTime(index)">{{item}}</li>
					<li>{{localTime}}</li>
				</ul>
				<ul v-if="role == 2" class="mui-table-view mui-table-view-chevron" style="margin-top: 0;">
					<li class="mui-table-view-cell mui-collapse myCollapse" v-for="day in dayList">
						<a :class="['headText',{'mui-navigate-right': day.TypeName!='正常'&& parseInt(day.Number)!=0 && showIndex!=0}]">
							{{day.TypeName}}
							<span class="mui-pull-right">{{day.Number}}</span>
						</a>
						<ul v-if=" day.TypeName != '正常' && parseInt(day.Number)!=0 && showIndex!=0" class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell" v-for="item in day.Items">
								<span>{{item.Date}}</span>
								<!--<span>{{item.Number}}</span>
								<span>{{item.CourseName}}</span>-->
							</li>
						</ul>
					</li>
				</ul>
				<ul v-if="role != 2" class="mui-table-view">
					<li class="mui-table-view-cell detailText" v-for="day in dayList" @click="goDetail(day.TypeName, day.Number, day.TypeID)">
						<a :class="{'mui-navigate-right' : parseInt(day.Number)!=0 }">
							{{day.TypeName}}
							<span class="mui-pull-right">{{day.Number}}</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div id="topPopover" class="mui-popover">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" v-for="list in classList" @click="changeClass(list.ClassID, list.ClassName)">{{list.ClassName}}</li>
			</ul>
		</div>
	</div>

</template>

<script>
	import {
		selfStudy,
		teacherClass,
		chooseStudent
	} from '@/service/getData'
	import {
		saveToLocal,
		loadFromLocal
	} from '@/service/store';
	export default {
		data() {
				return {
					title: "就寝考勤",
					timeList: ["当天", "当周", "当月"],
					isActive: false,
					localTime: "",
					curIndex: 0,
					role: null,
					input: "",
					dayList: [],
					allData: {},
					flag: false,
					classList: [],
					classId: "",
					SpecialtyID: "",
					GradeID: "",
					studentID: "",
					studentList: [],
					openSearch: false,
					proName: "",
					gradeName: "",
					classsName: "",
					showIndex: 0
				}
			},
			created() {
				this.userInfo = loadFromLocal("userInfo", "obj");
				let sRoute = this.$route.params.role.replace('#', '').split('&');
				this.role = sRoute[0];
			},
			mounted() {
				switch(this.role) {
					case '2': //学生权限
						{
							this.studentID = this.$route.params.role.replace('#', '').split('&')[1];
							this.title = this.$route.params.role.replace('#', '').split('&')[2] ? this.$route.params.role.replace('#', '').split('&')[2]+"的就寝考勤" : "就寝考勤";
							this.roleView(this.userInfo.userId, '', this.studentID)
						}
						break;
//					case '1': //教师权限
					case '3': //班主任权限
						{
							teacherClass({
								"UserID": this.userInfo.userId,
								"Type": 2
							}).then((res) => {
								this.classList = res.data;
								if(this.classList.length == 0) {
									this.classId = "";
								} else {
									this.classId = this.classList[0].ClassID;
									this.title = this.classList[0].ClassName;
								}
								this.roleView(this.userInfo.userId, this.classId, "")
							})
						}
						break;
					case '5': //专业主任权限
						{
							let sRoute = this.$route.params.role.replace('#', '').split('&');
							this.SpecialtyID = sRoute[1]?sRoute[1]:"";
							this.GradeID = sRoute[2]?sRoute[2]:"";
							this.classId = sRoute[3]?sRoute[3]:"";
							this.proName = sRoute[4];
							this.gradeName = sRoute[5];
							this.classsName = sRoute[6];
							if(this.proName && this.proName != "") {
								this.title = this.proName
							}
							if(this.gradeName && this.gradeName != "") {
								this.title = this.proName + '-' + this.gradeName
							}
							if(this.classsName && this.classsName != "") {
								this.title = this.classsName
							}
							this.roleView(this.userInfo.userId, this.classId, '')
						}
						break;
				}
			},
			watch: {
				//实时监听input值的变化
				input: {
					handler: function(val, oldval) {
//						debugger
//						this.openSearch = true;
						if(val == '' || val.replace(/(^\s*)|(\s*$)/g, "") == '') { //首尾去空格
							return false;
						}
						chooseStudent({
								"Userid": this.userInfo.userId,
								"keyword": val.replace(/(^\s*)|(\s*$)/g, "")
							}).then((res) => {
								this.studentList = res.data
							})
							//					console.log(this.$refs.type1.value);
					},
					deep: true
				},
				$route() {
					location.reload();
//					this.$router.go(0)
				}
			},
			methods: {
				//切换班级
				changeClass(id, name) {
					this.curIndex = 0;
					this.title = name;
					this.classId = id;
					this.roleView(this.userInfo.userId, id, "");
					mui('#topPopover').popover('hide');
				},
				//根据角色绘制页面
				roleView(userID, classID, studentID) {
					selfStudy({
						"userID": userID,
						"Type": 3,
						"SpecialtyID": this.SpecialtyID == "null" ? "" : this.SpecialtyID,
						'GradeID': this.GradeID == "null" ? "" : this.GradeID,
						"classID": classID == "null" ? "" : classID,
						"StudentID": studentID == "null" ? "" : this.studentID
					}).then((res) => {
						this.allData = res.data;
						this.drawLine(res.data.Chart);
						this.dayList = this.allData.Day;
						this.localTime = this.allData.CurrentDay;
					})
				},
				//绘制图表
				drawLine(chartdata) {
					// 指定图表的配置项和数据
					let option = {
						title: {
							show: false
						},
						tooltip: {
							show: false
						},
						color: ["#6b9ed5", "#76afda", "#80c1d7", "#8cd0d3", "#9ed7ce", "#9cabd6"],
						series: [{
							name: 'mainPie',
							type: 'pie',
							radius: '58%',
							center: ['50%', '55%'],
							roseType: false,
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							},
							label: {
								normal: {
									formatter: '{b}:\n{d}%({c})'
								}
							},
							labelLine: {
								normal: {
									length: 10,
									length2: 10,
									smooth: true
								}
							}
						}]
					};
					let myChart = this.$echarts.init(document.getElementById('round_chart'));
					option.series[0].data = chartdata;
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				},
				//切换时间段
				changeTime(index) {
					this.curIndex = index;
					switch(index) {
						case 0: //学生权限
							{
								this.localTime = this.allData.CurrentDay;
								this.dayList = this.allData.Day;
								this.showIndex = 0;
							}
							break;
						case 1:
							{
								this.localTime = this.allData.CurrentWeek;
								this.dayList = this.allData.Week;
								this.showIndex = 1;
							}
							break;
						case 2:
							{
								this.localTime = this.allData.CurrentMonth;
								this.dayList = this.allData.Month;
								this.showIndex = 2;
							}
							break;
						default:
							break;
					}
				},
				//搜索
				searchShow() {
					this.studentList = "";
					this.openSearch = true;
				},
				dataShow() {
//					debugger
					this.input = ""; //清空input中的值
					this.openSearch = false
				},
				goDetail(name, num, typeId) {
					if(parseInt(num) == 0) {
						return false;
					} else {
						let self = this;
						this.$router.push({
							name: 'SelfDetail',
							params: {
								SpecialtyID: this.SpecialtyID == "" ? "null" : this.SpecialtyID,
								GradeID: this.GradeID == "" ? "null" : this.GradeID,
								classId: this.classId == "" ? "null" : this.classId,
								studentID: this.studentID == "" ? "null" : this.studentID,
								name: name,
								num: num,
								typeId: typeId,
								status: this.curIndex,
								type: 3
							}
						})
					}
				},
				goStudent(name, studentId) {
					//this.dataShow();
					//this.title = name;
					//this.curIndex = 0;
					//this.roleView(this.userInfo.userId, '', studentId);
					this.$router.push({
						name: 'Sleep',
						params: {
							role: '2' + '&' + studentId + '&' + name
						}
					});
				},
				//选择班级
				chooseClass() {
					this.$router.push({
						name: 'ChooseClass',
						params: {
							role: this.role+'&3'
						}
					})
				}
			}
	}
</script>

<style scoped>
	.searchContent {
		width: 100%;
		margin-top: 10px;
		height: calc(100% - 54px);
		background: #FFFFFF;
		
		/*display: none;*/
	}
	
	.searchWrap {
		position: relative;
		padding: 0 10px;
		margin-top: 10px;
	}
	
	.searchWrap .searchBtn {
		position: absolute;
		left: 20px;
		top: 5px;
	}
	
	.searchWrap .actualInput {
		background: #FFFFFF;
		margin: 0;
		text-align: left;
		padding-left: 40px;
		color: #333;
		font-size: 15px;
		padding-right: 22px;
	}
	
	.searchWrap .cancel {
		position: absolute;
		right: 10px;
		top: 5px;
	}
</style>